<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:ctg="http://www.crotouristguide.com/taglib">
<body>

<f:view>
	<ui:composition template="/templates/layout/columns_3.xhtml">

		<ui:define name="column1">
			<br />
		</ui:define>
		<ui:define name="column2">
			<rich:panel styleClass="no-border">
				<ctg:status />
				<s:div styleClass="title"><h1><h:outputText
					value="#{messages['title.register.today']}" /></h1>
				<h:outputText
					value="#{messages['subtitle.already.have.account.1']} " /> <h:outputLink
					value="#{application.contextPath}/user/login.seam">
					<f:param name="l" value="#{currentLang}"/>
					<h:outputText
						value="#{messages['subtitle.already.have.account.2']}" />
				</h:outputLink>
				</s:div>
				<h:messages styleClass="error" globalOnly="true" />
				<br/>
				<h:form id="registerForm">
					<s:decorate id="roleDecoration" template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.role']}</ui:define>
						<h:selectOneMenu id="role" styleClass="role field"
							binding="#{registerAction.tipKorisnika}"
							value="#{registerAction.rola.idRole}" required="true">
							<f:selectItem itemValue="2"
								itemLabel="#{messages['label.user']}" />
							<f:selectItem itemValue="3"
								itemLabel="#{messages['label.advertiser.business']}" />
							<f:selectItem itemValue="4"
								itemLabel="#{messages['label.advertiser.private']}" />								
							<a:support event="onchange" bypassUpdates="true"
								reRender="logoForm,tt" />
						</h:selectOneMenu>
						<script type="text/javascript">
							 jQuery(function() {
								 jQuery(".role").qtip({
									   content: '#{messages["message.tooltip.user"]}<br/><br/>#{messages["message.tooltip.advertiser.business"]}<br/><br/>#{messages["message.tooltip.advertiser.private"]}',
									   position: {
									      corner: {
									         target: 'rightMiddle',
									         tooltip: 'leftMiddle'
									      }
									   },
									   style: { 
									      name: 'light',
									      border: {
									          width: 2,
									          radius: 4
									       },
									   	   tip: 'leftMiddle'					      
									   }, 				   
									   show: 'mouseover',
									   hide: 'mouseout'
									});

							 });
						</script>					
					</s:decorate>
					<a:outputPanel id="tt">
						<s:decorate id="imeDecoration" template="/templates/edit.xhtml">
							<ui:define name="label">
									<h:outputText value="#{messages['label.naziv']}"
										rendered="#{registerAction.tipKorisnika.value == '3'}" />
									<h:outputText value="#{messages['label.ime']}"
										rendered="#{registerAction.tipKorisnika.value == null or registerAction.tipKorisnika.value == '2' or registerAction.tipKorisnika.value == '4'}" />
							</ui:define>
							<h:inputText id="ime"  styleClass="field"
								value="#{korisnik.ime}" required="true">
	
							</h:inputText>
						</s:decorate>
						<s:decorate id="prezimeDecoration"
							template="/templates/edit.xhtml"
							rendered="#{registerAction.tipKorisnika.value == null or registerAction.tipKorisnika.value == '2' or registerAction.tipKorisnika.value == '4'}">
							<ui:define name="label">#{messages['label.prezime']}</ui:define>
							<h:inputText id="prezime"  styleClass="field" required="true"
								value="#{korisnik.prezime}">

							</h:inputText>
						</s:decorate>
						<s:decorate id="maticniBrojDecoration"
							template="/templates/edit.xhtml"
							rendered="#{registerAction.tipKorisnika.value == '3'}">
							<ui:define name="label">#{messages['label.maticni_broj']}</ui:define>
							<h:inputText id="maticniBroj" 
								required="true" styleClass="field"
								value="#{korisnik.maticniBroj}">
							</h:inputText>
						</s:decorate>
						<s:decorate id="adresaDecoration" template="/templates/edit.xhtml"
							rendered="#{registerAction.tipKorisnika.value == '3' or registerAction.tipKorisnika.value == '4'}">
							<ui:define name="label">#{messages['label.adresa']}</ui:define>
							<h:inputText id="adresa"  styleClass="field"
								value="#{korisnik.adresa}" validator="#{registerAction.validateLength}">
							</h:inputText>
						</s:decorate>
						<s:decorate id="kontaktImeDecoration"
							template="/templates/edit.xhtml"
							rendered="#{registerAction.tipKorisnika.value == '3' or registerAction.tipKorisnika.value == '4'}">
							<ui:define name="label">#{messages['label.kontakt_ime']}</ui:define>
							<h:inputText id="kontaktIme" 
								styleClass="field" value="#{korisnik.kontaktIme}">
							</h:inputText>
						</s:decorate>
					</a:outputPanel>
					<s:decorate id="countryDecoration" template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.country']}</ui:define>
						<h:selectOneMenu id="country"
							styleClass="field" value="#{korisnik.drzava}" required="true">
							<s:selectItems id="countries" value="#{drzave}" var="z"
								label="#{z.naziv}"
								noSelectionLabel="#{messages['label.choose']}" />
							<s:convertEntity></s:convertEntity>
						</h:selectOneMenu>
					</s:decorate>
					<s:decorate id="placeDecoration" template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.place']}</ui:define>
						<h:inputText id="place" styleClass="field"
							value="#{korisnik.mjesto}" required="true">
						</h:inputText>
					</s:decorate>
					<s:decorate id="zipCodeDecoration" template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.zip.code']}</ui:define>
						<h:inputText id="zipCode"  styleClass="field"
							value="#{korisnik.postanskiBroj}" required="true">
						</h:inputText>
					</s:decorate>
					<s:decorate id="emailDecoration" template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.email']}</ui:define>
						<h:inputText id="email"  styleClass="field"
							value="#{korisnik.email}" required="true"
							validator="#{registerAction.checkEmail}">

						</h:inputText>
						<ui:define name="tip">
							<h:outputText value="#{messages['message.enter.valid.email']}" />
						</ui:define>
					</s:decorate>
					<s:decorate id="phoneDecoration" template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.phone']}</ui:define>
						<h:inputText id="phone" styleClass="field"
							value="#{korisnik.telefon}">
						</h:inputText>
					</s:decorate>
					<s:decorate id="mobilePhoneDecoration"
						template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.mob_phone']}</ui:define>
						<h:inputText id="mobPhone"  styleClass="field"
							value="#{korisnik.mobTelefon}">
						</h:inputText>
					</s:decorate>
					<s:decorate id="usernameDecoration"
						template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.username']}</ui:define>
						<h:inputText id="username"  styleClass="field"
							value="#{korisnik.username}" required="true"
							validator="#{registerAction.checkUsername}">

						</h:inputText>
						<ui:define name="tip">
							<h:outputText value="#{messages['message.enter.credential']}" />
						</ui:define>
					</s:decorate>
					<s:decorate id="passwordDecoration"
						template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.password']}</ui:define>
						<h:inputSecret id="password" 
							styleClass="field" value="#{korisnik.password}" required="true"
							redisplay="true">
						</h:inputSecret>
					</s:decorate>
					<s:decorate id="confirmPasswordDecoration"
						template="/templates/edit.xhtml">
						<ui:define name="label">#{messages['label.confirm.password']}</ui:define>
						<h:inputSecret id="confirmPassword" 
							styleClass="field" value="" required="true" redisplay="true"
							validator="#{registerAction.validatePassword}">

						</h:inputSecret>
						<ui:define name="tip">
							<h:outputText value="#{messages['message.confirm.password']}" />
						</ui:define>
					</s:decorate>
					<a:outputPanel ajaxRendered="true">
						<s:decorate id="wwwDecoration" template="/templates/edit.xhtml"
							rendered="#{registerAction.tipKorisnika.value == '3'}">
							<ui:define name="label">#{messages['label.www']} http://</ui:define>
							<h:inputText id="www" styleClass="field"
								value="#{korisnik.www}" />
						</s:decorate>
					</a:outputPanel>
					<br />
					<s:div>
						<h:selectBooleanCheckbox id="agree"
							validator="#{simpleValidator.validateRequired}" />
						<h:outputText value="#{messages['message.i.agree.1']}" />
						<h:outputLink value="#{application.contextPath}/portal/legalterms">
							<h:outputText value="#{messages['message.i.agree.2']}" />
						</h:outputLink><ctg:nbsp/>
						<h:outputText value="#{messages['message.i.agree.3']}" />
						<br />
						<h:message for="agree" styleClass="error"></h:message>
					</s:div>
					<br />
					<s:div>
						<a:commandButton styleClass="submit"
							value="#{messages['label.sign.up.now']}"
							action="#{registerAction.register}" reRender="registerForm" />
						<input type="button" class="submit"
							value="#{messages['label.cancel']}" name="cancel"
							onclick="window.location='#{application.contextPath}/home';" />
					</s:div>
					<span class="note"><strong>#{messages['message.note.1']}</strong>#{messages['message.note.2']}
					<em>*</em> #{messages['message.note.3']}</span>
				</h:form>

				<h:form id="logoForm" enctype="multipart/form-data">
					<s:decorate id="logoDecoration" template="/templates/edit.xhtml"
						rendered="#{registerAction.tipKorisnika.value == '3'}">
						<ui:define name="label">
							<h:outputText value="#{messages['label.logo']}" />
						</ui:define>
						<s:fileUpload id="logo" styleClass="field" size="60"
							data="#{registerAction.logo}"
							contentType="#{registerAction.tipLoga}" accept="images/*"
							required="true" />
						<h:commandButton styleClass="submit"
							value="#{messages['label.osobine.input.button.addimage']}"
							action="#{registerAction.addLogo}">
						</h:commandButton>
					</s:decorate>
					<br />
					<h:panelGrid columns="2" rendered="#{korisnik.logo != null}">
						<h:outputText value="#{messsages['label.your_logo']}" />
						<s:graphicImage value="#{korisnik.logo}"
							alt="#{messages['label.image.alt']}">
							<s:transformImageSize width="200" height="120"
								maintainRatio="false" />
						</s:graphicImage>
					</h:panelGrid>
				</h:form>
			</rich:panel>
		</ui:define>
		<ui:define name="column3">
			<h1> #{messages['title.membership.benefits']}</h1>
			<ul>
				<li><strong>#{messages['message.register.newsletters']}:</strong><br />
				#{messages['message.register.newsletters.detail']}</li>
				<li><strong>#{messages['message.register.advertise']}:</strong><br />
				#{messages['message.register.advertise.detail']}</li>				
				<li><strong>#{messages['message.register.personalization']}:</strong><br />
				#{messages['message.register.personalization.detail']}</li>
				<li><strong>#{messages['message.register.your.opinion']}:</strong><br />
				#{messages['message.register.your.opinion.detail']}</li>
			</ul>
		</ui:define>
	</ui:composition>
</f:view>
</body>
</html>